<template>
    <div class="rootView">
        <div class="dd-timeTips flex-center-align">
            <span> 订单待支付，请在 </span>
            <el-statistic
                ref="statistic"
                format="HH:mm:ss"
                :value="deadline"
                time-indices
            >
            </el-statistic>
            <span>内支付</span>
        </div>
        <div class="dd-info">
            <div class="bold fz18 mb20">订单详情</div>
            <el-form :label-position="labelPosition" :inline="true">
                <el-form-item label="订单编号：">
                    <span>1594499691385589760</span>
                </el-form-item>
                <el-form-item label="交易时间：">
                    <span>2022-11-21 09:15:25</span>
                </el-form-item>
                <el-form-item label="服务金额：">
                    <span>2000元</span>
                </el-form-item>

                <el-form-item label="服务类型：">
                    <span>个人独资企业注册</span>
                </el-form-item>
                <el-form-item label="联系人：">
                    <span>张先生</span>
                </el-form-item>
                <el-form-item label="联系电话：">
                    <span>18522454546</span>
                </el-form-item>
                <el-form-item label="服务备注：">
                    <span class="fwbz ellipsis2"
                        >个人独资企业个人独资企业注册个人独资企业注册个人独资企业注册个人独资企个人独资企业个人独资企业注册个人独资企业注册个人独资企业注册个人独资企个人独资企业个人独资企业注册个人独资企业注册个人独资企业注册个人独资企个人独资企业个人独资企业注册个人独资企业注册个人独资企业注册个人独资企个人独资企业个人独资企业注册个人独资企业注册个人独资企业注册个人独资企</span
                    >
                </el-form-item>
            </el-form>

            <div class="border">
                <img
                    src="~/assets/images/service/border.png"
                    alt=""
                    class="img100"
                />
            </div>
        </div>

        <div class="dd-pay">
            <div class="bold fz18 mb20">请选择支付方式</div>
            <div class="pay-nav flex">
                <span
                    class="pay flex-center-align"
                    :class="{ pay_s: payCurrent == 0 }"
                    @click="payCurrent = 0"
                    >在线支付</span
                >
                <span
                    class="pay flex-center-align"
                    :class="{ pay_s: payCurrent == 1 }"
                    @click="payCurrent = 1"
                    >线下汇款</span
                >
            </div>

            <div class="pay-main">
                <div class="b-payment">
                    <div class="online-pay flex mb70" v-if="payCurrent == 0">
                        <div
                            class="payment flex-center-align"
                            v-for="(item, index) in paymentList"
                            :key="index"
                        >
                            <div class="selectIcon">
                                <img
                                    :src="item.selectIcon"
                                    class="img100"
                                    alt=""
                                />
                            </div>

                            <div class="icon">
                                <img :src="item.icon" class="img100" alt="" />
                            </div>
                            <span>{{ item.name }}</span>
                        </div>
                    </div>
                    <div class="offline-pay flex" v-if="payCurrent == 1">
                        <img
                            src="~/assets/images/service/pay_bank.png"
                            class="pay-bank mr20"
                            alt=""
                        />
                        <div class="bank fz12 c666">
                            <div class="mb20">
                                <span class="fz14 c333">汇款识别码：</span>
                                <span class="fz14 cff4">258440</span>
                            </div>
                            <div class="c666 mt30">
                                <p>1.按照订单实付金额汇款至指定银行账号</p>
                                <p>
                                    2.线下汇款，汇款时请务必在“用途”或“附言”栏中填写“汇款识别码”
                                </p>
                                <p>3.提交</p>
                            </div>
                            <div class="bankInfo mt30">
                                <el-form :label-position="labelPosition">
                                    <el-form-item label=" 开户名称：">
                                        <span>深圳市成功快车科技有限公司</span>
                                    </el-form-item>
                                    <el-form-item label="开户银行：">
                                        <span
                                            >中国工商银行股份有限公司深圳布吉支行</span
                                        >
                                    </el-form-item>
                                    <el-form-item label="  开户账号：">
                                        <span>4000022319202056345</span>
                                    </el-form-item>
                                    <el-form-item label="  汇款识别码：">
                                        <span>258440</span>
                                    </el-form-item>
                                </el-form>

                                <div class="tip">
                                    注：汇款成功后，我们将尽快确认汇款结果；您也可以联系我们工作人员，尽快确认。
                                </div>
                            </div>
                        </div>
                    </div>
                    <el-checkbox v-model="agree" true-label="1" false-label="0">
                        <span class="agree">
                            我已同意
                            <span @click.stop="goxieyi()"
                                >《小竹财税合同协议.pdf》</span
                            >
                        </span>
                    </el-checkbox>

                    <div class="pay-btn flex-center-align">
                        <span>实付总额: </span
                        ><i class="fz30 bold cff4 mr30">￥2000</i>
                        <span class="btn">立即付款</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //时间格式化
            format: "HH小时:mm:ss:SSS",
            deadline:
                Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),

            labelPosition: "right",
            payCurrent: 0, //支付选择

            agree: "",

            paymentList: [
                {
                    selectIcon: require("~/assets/images/service/pay_check1.png"),
                    name: "支付宝",
                    icon: require("~/assets/images/service/pay_zfb.png"),
                },
                {
                    selectIcon: require("~/assets/images/service/pay_check0.png"),
                    name: "支付宝",
                    icon: require("~/assets/images/service/pay_wx.png"),
                },
            ],
        };
    },
    methods: {
        // 用户协议跳转
        goxieyi() {
            if (e == 1) {
                window.open(
                    "http://api.xiaozhucaishui.com/#/pages/wapzhuce/xieyis?type=user_agreement&name=%E5%B0%8F%E7%AB%B9%E8%B4%A2%E7%A8%8E%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE",
                    "_blank"
                );
            } else {
                window.open(
                    "http://api.xiaozhucaishui.com/#/pages/wapzhuce/xieyis?type=privacy_agreement&name=%E5%B0%8F%E7%AB%B9%E8%B4%A2%E7%A8%8E%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96",
                    "_blank"
                );
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.rootView {
    .dd-timeTips {
        margin-top: 10px;
        text-align: center;
        line-height: 50px;
        width: 100%;
        height: 50px;
        background: #ffffff;
        font-size: 14px;
    }

    .dd-info {
        position: relative;
        margin-top: 15px;
        padding: 30px;
        width: 100%;
        height: 252px;
        background: #ffffff;

        .fwbz {
            max-width: 1045px;
        }

        .border {
            position: absolute;
            bottom: -5px;
            right: 0;
            width: 100%;
            height: 14px;
        }
    }
    .dd-pay {
        margin-top: 25px;
        padding: 30px;
        width: 100%;
        background: #ffffff;

        .pay-nav {
            height: 50px;
            line-height: 50px;
            background: #f4f4f4;
            border: 1px solid #f2f2f2;

            .pay {
                width: 120px;
                height: 100%;
                font-size: 14px;
                cursor: pointer;
            }
            .pay_s {
                width: 120px;
                height: 100%;
                font-size: 14px;
                cursor: pointer;
                background-color: #ffffff;
            }
        }

        .pay-main {
            width: 100%;
            border: 1px solid #f2f2f2;
            .b-payment {
                position: relative;
                padding: 40px;

                .payment {
                    margin-top: 20px;
                    margin-right: 20px;
                    padding: 0 30px;
                    width: 210px;
                    height: 68px;
                    background: #ffffff;
                    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #ececec;
                    font-size: 18px;

                    .selectIcon {
                        width: 25px;
                        height: 25px;
                    }

                    .icon {
                        margin: 0 10px;
                        width: 40px;
                        height: 40px;
                    }
                }

                .offline-pay {
                    // padding: 30px;

                    .pay-bank {
                        width: 104px;
                        height: 86px;
                    }

                    .tip {
                        margin-top: 30px;
                        margin-bottom: 50px;
                        font-size: 12px;
                        color: #999;
                    }
                }

                .pay-btn {
                    width: 350px;
                    height: 42px;
                    position: absolute;
                    bottom: 12px;
                    right: 0;

                    .btn {
                        display: inline-block;
                        text-align: center;
                        width: 140px;
                        height: 42px;
                        line-height: 42px;
                        background: #1c87f3;
                        border-radius: 4px;
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>  

<style lang="scss" scoped>
::v-deep .el-statistic {
    width: 64px;
    display: inline-block;
}

::v-deep .el-statistic .con {
    // display: none;
    color: #fa5151;
    font-size: 14px;
    // align-items: baseline !important;
}

::v-deep .el-statistic .con .number {
    font-size: 14px !important;
}

::v-deep .el-form-item {
    min-width: 300px;
    margin-bottom: 0;
}

::v-deep .el-form-item__label {
    color: #9e9e9e;
}

::v-deep .bankInfo .el-form-item__content {
    color: #333;
    line-height: 30px;
}

::v-deep .bankInfo .el-form-item__label {
    color: #333;
    line-height: 30px;
}
</style>  